<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书-活动管理</title>
    <link rel="icon" href="/static/images/t_logo.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/lyk-global.css" />
    <link rel="stylesheet" href="/static/elementui/lib/theme-chalk/index.css">
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <script src="/static/js/requestApi.js" type="text/javascript"></script>
    <script src="/static/js/vue/vue.js"></script>
    <!-- 引入elementui -->
    <script src="/static/elementui/js/element.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/axios-config.js"></script>
    <script src="/static/js/utilJs.js"></script>
</head>
<style>
    *{
        font-size: 14px
    }
    [v-cloak] {
        display: none;
    }
</style>
<body style="background-color: #fff">
<div id="app" v-cloak>
    <div class="mt-8 ml-4">
        <div class="df-aic ">
            <el-input placeholder="请输入活动名称" size="small" style="width:200px;" class="ml-2" v-model="queryParam.activityName" @keyup.native.enter="getTableDataMethod(true)"></el-input>
            <el-date-picker
                    v-model="queryParam.activityStartTime"
                    type="date"
                    placeholder="请选择活动开始时间" style="width:200px;" class="ml-2" size="small" value-format="yyyy-MM-dd">
            </el-date-picker>
            <el-button type="primary" size="small" class="ml-2" @click="getTableDataMethod(true)">搜索</el-button>
            <el-button type="primary" size="small" class="ml-2" @click="addOrEditActivityMethod(null)">新增活动</el-button>
        </div>
        <el-table :data="tableData" v-loading="tableDataLoading" class="mt-4">
            <el-table-column prop="activityName" label="活动名称" width="150"></el-table-column>
            <el-table-column label="报名时间">
                <template slot-scope="scope">
                    <div v-if="scope.row.applyStartTime">
                        <span>{{scope.row.applyStartTime}}</span>
                        <span>~</span>
                        <span>{{scope.row.applyEndTime}}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="签到时间">
                <template slot-scope="scope">
                    <span>{{scope.row.signStartTime}}</span>
                    <span>~</span>
                    <span>{{scope.row.signEndTime}}</span>
                </template>
            </el-table-column>
            <el-table-column label="活动时间">
                <template slot-scope="scope">
                    <span>{{scope.row.activityStartTime}}</span>
                    <span>~</span>
                    <span>{{scope.row.activityEndTime}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="typeDesc" label="类型"></el-table-column>
            <el-table-column prop="activityBrandDesc" label="活动品牌"></el-table-column>
            <el-table-column prop="activityTargetObjectDesc" label="活动对象"></el-table-column>
            <el-table-column prop="activityLocationDesc" label="活动地点"></el-table-column>
            <el-table-column label="年龄">
                <template slot-scope="scope">
                    <span v-if="scope.row.ageMin">{{scope.row.ageMin}}</span>
                    <span v-if="scope.row.ageMin && scope.row.ageMax ">~</span>
                    <span v-if="scope.row.ageMax">{{scope.row.ageMax}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="peopleNum" label="活动总名额"></el-table-column>
            <el-table-column prop="speaker" label="主讲人"></el-table-column>
            <el-table-column prop="contactPhone" label="联系电话"></el-table-column>
            <el-table-column prop="stateDesc" label="状态"></el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <div v-loading="deleteLoading" >
                        <el-button size="small" class="mt-4" @click="publishActivity(scope.row)" v-if="scope.row.state==6" >发布</el-button>
                        <el-button size="small" class="mt-4" @click="addOrEditActivityMethod(scope.row,1)" >查看</el-button>
                        <el-button size="small" @click="addOrEditActivityMethod(scope.row)" class="mt-2" v-if="scope.row.state==6" >编辑</el-button>
                        <el-button size="small" class="mt-4" style="margin-left:0px;" @click="showActivityApplyDetailMethod(scope.row)" v-if="scope.row.activityApplyDetails != null">报名情况</el-button>
                        <el-popconfirm :title='"是否删除该条数据？"'
                                       @confirm="deleteActivityMethod(scope.row)">
                            <el-button slot="reference" type="danger" size="small" v-loading="deleteLoading"  class="mt-4">删除</el-button>
                        </el-popconfirm>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <el-pagination background layout="total,sizes,prev, pager, next" :total="tableDataPaging.total"
                   :page-sizes="[10, 20, 50]"
                   prev-text="上一页" next-text="下一页"
                   :page-size="tableDataPaging.pageSize"
                   :current-page="tableDataPaging.currentPage"
                   @current-change="tableDataPagingChange"
                   @prev-click="tableDataPagingChange" @next-click="tableDataPagingChange"
                   @size-change="tableDataPagingSizeChange"
                   style="float:right;margin-top: 40px;padding-bottom:50px;">
    </el-pagination>

    <el-dialog :title="activityApplyDetailDialogTitle" :visible.sync="activityApplyDetailDialogVisible" width="1200px"  append-to-body	>
        <div>
            <div class="mt-8 ml-4">
                <el-table :data="activityApplyDetailTableData"class="mt-4">
                    <el-table-column prop="userName" label="账号" width="300"></el-table-column>
                    <el-table-column prop="fullName" label="用户昵称"></el-table-column>
                    <el-table-column prop="createTime" label="报名时间"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-popconfirm :title='"是否删除该条数据？"'
                                           @confirm="delActivityApplyDetailMethod(scope.row)">
                                <el-button slot="reference" type="danger" size="small" class="mt-2">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="df-aic-jcc mt-9 mb-9">
            <el-button size="small" class="ml-6" @click="activityApplyDetailDialogVisible = false">取消</el-button>
        </div>
    </el-dialog>

</div>
</body>

<script type="text/javascript">
    const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#app', // element: 指定用vue来管理页面中的哪个标签区域
        components: {
        },
        data() {
            return {
                deleteLoading : false,
                queryParam : {
                    activityName:"",
                    activityStartTime:"",
                },
                tableData : [],
                tableDataLoading : false,
                tableDataPaging : {
                    currentPage : 1,
                    pageSize : 10,
                    total : 0,
                },
                activityApplyDetailDialogVisible:false,
                activityApplyDetailDialogTitle:'',
                activityApplyDetailTableData:[],
            }
        },
        mounted() {
            let that = this;
            this.$nextTick(function () {
                this.getTableDataMethod();
            });
        },
        methods: {
            addOrEditActivityMethod(row,isOnlySee){
                if(row){
                    window.open("./addOrEditActivity.html?id=" + row.id+"&isOnlySee="+isOnlySee);
                }else{
                    window.open("./addOrEditActivity.html" );
                }

            },
            addOrEditDonationMethod(title,row){
                let that = this;
                that.addOrEditDonationDialogVisible = true;
                this.$nextTick(function () {
                    this.$refs['donationForm'].resetFields();//还原数据
                    that.addOrEditDonationDialogTitle = title;
                    if(row){
                        let deepCopyRow = JSON.parse(JSON.stringify(row));
                        that.donationForm = deepCopyRow;//深拷贝一下
                    }
                });
            },
            addOrEditDonationDialogSureMethod(){
                let that = this;
                let deepCopyForm = JSON.parse(JSON.stringify(that.donationForm));
                deepCopyForm.donationName = $.trim(deepCopyForm.donationName);
                deepCopyForm.donationInfo = $.trim(deepCopyForm.donationInfo);
                deepCopyForm.donationTime = $.trim(deepCopyForm.donationTime);
                if(!deepCopyForm.donationName){
                    that.$message.error("请输入赠书人");
                    return;
                }
                if(!deepCopyForm.donationInfo){
                    that.$message.error("请输入赠书信息");
                    return;
                }
                if(!deepCopyForm.donationTime){
                    that.$message.error("请输入赠书时间");
                    return;
                }
                deepCopyForm.donationTime = deepCopyForm.donationTime +"-01";
                let url = "";
                if (!deepCopyForm.id) {
                    url = "donation/addDonation";
                } else {
                    url = "donation/updateDonation";
                }
                requestApiTB(url, deepCopyForm, 'POST', function (res) {
                    if (res.code === 0) {
                        that.$message.success("执行成功");
                        that.addOrEditDonationDialogVisible = false;
                        that.getTableDataMethod(true);
                    } else {
                        that.$message.error(res.msg);
                    }
                });

            },

            tableDataPagingChange(val) {
                let that = this;
                that.tableDataPaging.currentPage = val;
                that.getTableDataMethod();
            },
            tableDataPagingSizeChange(val) {
                let that = this;
                that.tableDataPaging.pageSize = val;
                that.getTableDataMethod();
            },

            //获取表格的数据
            getTableDataMethod(isChongZhi){
                let that = this;
                if (isChongZhi) {
                    this.tableDataPaging.currentPage = 1;
                }
                const {activityName,activityStartTime} = this.queryParam
                let queryData = {
                    activityName: $.trim(activityName),
                    activityStartTime: $.trim(activityStartTime),
                    pageNum: this.tableDataPaging.currentPage,
                    pageSize: this.tableDataPaging.pageSize,
                }
                this.tableDataLoading = true;
                that.tableData = [];
                axios.post('/activity/getActivityList', queryData)
                    .then(result => {
                        let res = result.data;
                        this.tableDataLoading = false;
                        if (res.code === 0) {
                            that.tableData = res.data.list;
                            that.tableDataPaging.total = res.data.total;
                        }
                    }).catch(error => {
                    that.$message.error("error");
                    this.tableDataLoading = false
                })
            },
            deleteActivityMethod(row){
                let that = this;
                if(!row.id){
                    that.$message.error("尚无id");
                    return;
                };
                that.deleteLoading = true;
                requestApi("activity/delActivity",{"id" : row.id}, "POST", function(res){
                    that.deleteLoading = false;
                    if(res.code === 0){
                        that.$message.success("删除成功");
                        that.getTableDataMethod(true);
                    }else{
                        that.$message.error(res.msg);
                    }
                });
            },

            //发布活动
            publishActivity(row){
                let that = this;
                if(!row.id){
                    that.$message.error("尚无id");
                    return;
                };
                requestApi("activity/publishActivity",{"id" : row.id}, "POST", function(res){
                    that.deleteLoading = false;
                    if(res.code === 0){
                        that.$message.success("发布成功");
                        that.getTableDataMethod(true);
                    }else{
                        that.$message.error(res.msg);
                    }
                });
            },

            //报名详情
            showActivityApplyDetailMethod(row){
                let that = this;
                that.activityApplyDetailDialogVisible = true;
                that.activityApplyDetailDialogTitle = row.activityName;
                this.$nextTick(function () {
                   that.getActivityApplyTableData(row.id);
                });
            },

            //获取报名详情的接口
            getActivityApplyTableData(activityId){
                let that = this;
                requestApiTB("activity/getActivityApplyDetailList", {"activityId":activityId}, 'POST', function (res) {
                    if (res.code === 0) {
                        that.activityApplyDetailTableData = res.data;
                    } else {
                        alert(res.msg);
                    }
                });
            },

            //报名详情删除
            delActivityApplyDetailMethod(row){
                let that = this;
                requestApiTB("activity/delActivityApplyDetailById", {"id":row.id}, 'POST', function (res) {
                    if (res.code === 0) {
                        alert("删除成功");
                        that.getActivityApplyTableData(row.activityId);
                    } else {
                        alert(res.msg);
                    }
                });
            },





        }
    })
</script>
</html>